<template>
  <div id="shopcar"> 
 <div class="bt">&nbsp;/&nbsp;所有&nbsp;› &nbsp;个人中心</div>
      <div class="user_area">
	      <div class="navigation">
	        <ul>
	          <li><router-link to="./index" >基本信息</router-link></li>
	          <li><router-link to="./notice" >我的消息</router-link></li>
	          <li><router-link to="./address" >收货地址</router-link></li>
	          <li><router-link to="./myorder" >我的订单</router-link></li>
	          <li class="select"><router-link to="./shop_car" >购物车</router-link></li>
	        </ul> 
	      </div>
        <div class="main">
          <div style="display: none">{{ allcheck }}</div>
          <table  class="table2" cellspacing="0" cellpadding="0" >
              <tr>
                <th width="800px" colspan="7">我的购物车</th>
              </tr>
              <tr class="tr">
                <td width="50px" ></td>
                <td>商品名</td>
                 <td>状态</td>
               	<td>数量</td>
                <td>价格</td>
                <td>小计</td>
                <td>操作</td>
              </tr>
              <tr v-for="(item,index) in shopcardata" v-if="shopcardata[0]">
              <td class="label"><input type="checkbox" @click="select(index)" :checked="item.checked"></td>
      				<td width="170px">{{ item.title }}</td>
      				<td width="80px">{{ item.status }}</td>
      				<td width="150px">
                  <computeds :num="item.num" @resnum="change" :index="index"></computeds>
      				<td width="100px">￥{{ item.single_price | currency }}</td>
              <td width="100px">￥{{  item.single_price*item.num | currency }}</td>
      				<td width="150px"><a href="javascript:;" style="font:bold 14px/16px '微软雅黑';color:#5FB878;margin-right:15px;" @click="go_buy(item.fid,item.num)">去支付</a><a href="javascript:;" style="font:bold 14px/16px '微软雅黑';color:#FF5722" @click="removecar(item.id)">删除</a></td>
              </tr>
              <tr v-if="shopcardata[0]">
                  <td colspan="7"><span style="float: left;margin-left:10px"><a href="javascript:;" @click="allselect(true)">全选</a>&nbsp;&nbsp;<a href="javascript:;" @click="allselect(false)">取消全选</a></span><span style="float: right;margin-right:10px">总计:￥{{ total | currency}}</span></td>
              </tr>
              <tr v-if="!shopcardata[0]">
                  <td colspan="7">暂无数据</td>
              </tr>
<!--               <tr>
                <td colspan="7"><button>去支付</button></td>
              </tr> -->
          </table>        
        </div>
      </div>
  </div>
</template>

<script>
import computeds from '../Public/computed.vue';
export default {
  components:{
    'computeds':computeds
  },
  data() {
    return {
    	shopcardata:[],
      allcheck:false,
      num:1,
      total:0
    }
  },
  created:function(){
  	this.getcardata();
  },
  watch:{
  },
  filters: {
	currency: function (value) {
	   return parseInt(value).toFixed(2);
	}
  },
  methods:{
  	getcardata(){
      var uid = this.$cookie.get('uid');
      this.$http({
          method:'GET',
              url:'http://123.56.86.203/food/getcardata?uid='+uid,
      }).then(function(info){
      		var data=info.data;
      		if(data.status == 0){
      			this.shopcardata =data.info;
            for(var i=0;i<this.shopcardata.length;i++){
              this.shopcardata[i].checked=false;

            }
      		}
      },function(error){
            console.log(error);
      })  		
  	},
    select(index){
      this.shopcardata[index].checked=!this.shopcardata[index].checked;
      this.total_computed();
    },
    allselect(flag){
      this.allcheck=flag;
      for(var i=0;i<this.shopcardata.length;i++){
         this.shopcardata[i].checked=flag;
      }
      this.total_computed();
    },
    change(data){
      this.shopcardata[data.index].num=data.number;
      this.total_computed();
    },
    total_computed(){
      this.total=0;
      for(var i=0;i<this.shopcardata.length;i++){
        if(this.shopcardata[i].checked == true){
          this.total +=this.shopcardata[i].num*this.shopcardata[i].single_price;
        }
      }
    },
    go_buy(index,num){
      var uid=this.$cookie.get('uid');
      this.$router.push({ name: 'pay', params: { flow:1,fid: index ,uid:uid,num:num}});
    },
    removecar(id){
      this.$http({
          method:'GET',
              url:'http://123.56.86.203/food/removecar?id='+id,
      }).then(function(info){
          var data=info.data;
          if(data.status == 0){
            alert('删除成功');
            this.getcardata();
          }else{
            alert('删除失败，请联系客服');
          }
      },function(error){
            console.log(error);
      }) 
    }
  }
}
</script>
<style scoped>
#shopcar{
  width:1000px;
  margin:0 auto;
}
#address{
  width:1000px;
  margin:0 auto;
}
.bt{
   width: 100%;
  height: 25px;
  font:13px/25px '微软雅黑';
}
.user_area{
  width: 100%;
  margin:10px;
}
.user_area .navigation{
  padding-top: 15px;
  padding-bottom: 15px;
  width: 12%;
  background-color: rgba(255,255,255,0.6);
  float: left;

}
.user_area .navigation ul{
  width: 100%;
}
.user_area .navigation ul li a{
  width: 85%;
  font:15px/30px '微软雅黑';
  color:#666;
  padding-left: 15%;
}
.user_area .navigation ul .select a{
  color:#FF4400;
  background-color: rgba(255,255,255,0.5);
}
.user_area .main{
  float: left;
  width: 75.5%;
  margin-left: 3%;
  background-color: rgba(255,255,255,0.6);
  padding: 30px 4%;
}
.router-link-active{
  background-color: rgba(255,255,255,0.5);
}
.user_area .main table{
  width: 100%;
  text-align: center;
}
.table2 tr th{
  font:22px/35px '微软雅黑';
  height: 50px;
  border-bottom: 1px solid #ccc;
}
.table2 tr td{
  height: 45px;
  font:bold 14px/22px '微软雅黑';
  color:#666;
  border: 1px solid #E2E2E2;

}
.table2 .tr td{
  font:bold 15px/28px '微软雅黑';
  color:#000;
  height: 50px;
  background-color: #F2F2F2;
}
.table2 tr td a{
   font:bold 14px/22px '微软雅黑';
  color:#666;
 
}
.table2 tr td span{
    font:bold 14px/22px '微软雅黑';
  color:#666; 
}
.table2 tr td .cmt{
  width: 90px;
  text-align: center;
  color:#fff;
  height: 30px;
  font:14px/28px '微软雅黑';
  background-color:#5FB878;
  border: 1px solid #5FB878;

}
.table2 tr td  .minus{
  float: left;
  margin-left: 15px;
}
.table2 tr td  .num_area{
  width: 38%;
  float: left;
  height: 28px;
  background-color:#fff;
  border: 1px solid #ccc;
  text-align: center;
  font:14px/28px '微软雅黑';
  color:#999;
}
.table2 tr td .plus{
  float: left;
}
.table2 tr td  button{
  height: 30px;
  width: 20%;
  background-color: #fff;
  border: 1px solid #ccc;
  color:#999;
} 
</style>
